import { reactive, provide, inject, App } from 'vue'
import { createPinia } from 'pinia'
// 定义卡片信息的类型接口
interface CardInfo {
	name : string
	title : string
	company : string
	phone : string
	email : string
	address : string
	avatar : string
	qrcode : string
}

// 定义状态的类型接口
interface State {
	selectedTemplate : string
	cardInfo : CardInfo
	setTemplate : (template : string) => void
	updateCardInfo : (info : Partial<CardInfo>) => void
}

const StoreKey = Symbol('business-card-store')

export function createStore() {
	const state : State = reactive({
		selectedTemplate: 'default',
		cardInfo: {
			name: '张明',
			title: '产品经理',
			company: '科技有限公司',
			phone: '13800138000',
			email: 'zhangming@example.com',
			address: '北京市朝阳区',
			avatar: 'https://picsum.photos/id/1005/200/200',
			qrcode: 'https://picsum.photos/id/237/100/100'
		},
		setTemplate(template : string) {
			state.selectedTemplate = template
		},
		updateCardInfo(info : Partial<CardInfo>) {
			state.cardInfo = { ...state.cardInfo, ...info }
		}
	})

	return {
		install(app : App) {
			app.provide(StoreKey, state)
		}
	}
}

export function useStore() {
	const store = inject<State>(StoreKey)
	if (!store) {
	  throw new Error('Please install the store first.')
	}
  return store
}